<template>
  <div>
    <overview-nav />
    <div class="container-main">
      <el-form
        class="build-form"
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <div class="title-header">
          应用构建配置
          <p class="sub-title">构建生成多环境发布包下载，生成Docker镜像和配置</p>
        </div>

          <div class="buildProject">
              <el-button type="primary" size="small" @click="submitPackage">
                <i class="el-icon-download"></i> 构建工程
              </el-button>
          </div>

          <el-table
              :data="tableData"
              style="width: 100%">

          <el-table-column label="序号" type="index" width="50" align="center">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>

          <el-table-column
              prop="name"
              label="构建名称">
          </el-table-column>

          <el-table-column
              prop="address"
              align="center"
              label="构建状态">
          </el-table-column>

          <el-table-column
              prop="date"
              width="180"
              align="center"
              label="构建时间">
          </el-table-column>

          <el-table-column with="80" label="下载" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-document"
                @click="handleDelete(scope.row)"
              >查看日志</el-button>

              <el-button
                size="mini"
                type="text"
                icon="el-icon-download"
                @click="downloadProject(scope.row)"
              >下载</el-button>
            </template>
          </el-table-column>

          </el-table>

      </el-form>

    </div>

    <el-dialog
      title="选择下载包类型"
      :visible.sync="dialogVisible"
      width="800px">
      <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="构建类型" prop="buildType">
            <el-radio-group v-model="formData.buildType" size="medium">
              <el-radio
                v-for="(item, index) in buildTypeList"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="构建场景" prop="buildScene">
            <el-radio-group
                @change="selectBuildScene"
                v-model="formData.buildScene" size="medium">
              <el-radio
                v-for="(item, index) in buildSceneList"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>

          <el-divider content-position="left">资源配置</el-divider>

          <el-form-item label="CPU资源" prop="resourceRequestCpu">
              <el-input
                v-model="formData.resourceRequestCpu"
                placeholder="请输入请求CPU资源"
                clearable
                class="input-resource"
                :style="{ width: '30%' }"
              >
                <template slot="append">m</template>
              </el-input>
              <el-input
                v-model="formData.resourceLimitCpu"
                placeholder="请输入最大CPU资源"
                clearable
                class="input-resource"
                :style="{ width: '30%'}"
              >
                <template slot="append">m</template>
              </el-input>
            </el-form-item>
            <el-form-item label="内存资源" prop="resourceRequestMem">
              <el-input
                v-model="formData.resourceRequestMem"
                placeholder="请输入请求内存资源"
                clearable
                class="input-resource"
                :style="{ width: '30%' }"
              >
                <template slot="append">Mi</template>
              </el-input>
              <el-input
                v-model="formData.resourceLimitMem"
                placeholder="请输入最大内存资源"
                clearable
                class="input-resource"
                :style="{ width: '30%'}"
              >
                <template slot="append">Mi</template>
              </el-input>
            </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="packageDownload"> <i class="el-icon-download"></i> 下载</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import OverviewNav from "./overviewNav";
import {buildProjectParams , buildGitlab , buildDockerStatus , buildDocker , buildK8S , getBuildProjectParams} from "@/api/api";

export default {
  components: {
    OverviewNav,
  },
  data() {
    return {
      projectIconSelect: 'https://gw.alicdn.com/tfs/TB197e_CHrpK1RjSZTEXXcWAVXa-102-102.png' ,
      projectIconsVisible: false ,
      dialogVisible: false ,
      formData: {
        buildType: "kubernates",
        buildScene: "dev",
        serviceMonitor: "",
        containerPort: "8080",
        resourceRequestCpu: "5",
        resourceLimitCpu: "20",
        resourceRequestMem: "128",
        resourceLimitMem: "1024",
      },
      buildTypeList: [
        { label: "kubernates", value: "kubernates" },
        { label: "fastJar", value: "fastjar" },
        { label: "docker-compose", value: "docker" },
      ],
      buildSceneList: [
        { value: "dev", label: "开发环境" },
        { value: "normal", label: "普通环境" },
        { value: "pro", label: "生产环境" },
      ],
      tableData: [{
        date: '2016-05-02 12:23:56',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02 12:23:56',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-02 12:23:56',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-02 12:23:56',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  },
  methods: {
    submitPackage() {
      var pId = this.$route.params.pId ;

      const loading = this.$loading({
        lock: true,
        text: '正在构建镜像中,预计15秒左右',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      // 发布到Jenkins打包镜像
      buildDocker(pId).then(response =>{
        console.log("build gitlab = " + response)  ;
        loading.close();
      }, error => {
        console.log(error);
        loading.close();
      }) ;
    },
    selectBuildScene(v){
      if(v == "dev"){
        this.formData.resourceRequestCpu = "5"
        this.formData.resourceLimitCpu = "20"

        this.formData.resourceRequestMem = "128"
        this.formData.resourceLimitMem = "1024"
      } else if(v == "pro"){
        this.formData.resourceRequestCpu = "20"
        this.formData.resourceLimitCpu = "100"

        this.formData.resourceRequestMem = "1024"
        this.formData.resourceLimitMem = "4095"
      } else if(v == "normal"){
        this.formData.resourceRequestCpu = "10"
        this.formData.resourceLimitCpu = "50"

        this.formData.resourceRequestMem = "512"
        this.formData.resourceLimitMem = "2048"
      }
    },
    downloadProject(row){
      this.dialogVisible = true ;
    },
    packageDownload(row){
      this.dialogVisible = false ;
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/asserts/css/build/component.scss';

.build-form{
  width: 980px;
  max-width: 980px;
  margin: auto;

  .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
      background-color: #fff ;
  }
}

.projectIcon {
    margin: 10px;
    cursor: pointer;
    background: #f7f9fa;
}

.gvwTmF{
  margin-bottom: 0px !important ;
}

.title-header{
  text-align: center;
  padding: 20px;
  font-size: 25px;

  .sub-title {
    font-size: 13px ;
    font-weight: normal ;
  }
}

.input-resource{
  margin-right: 20px;
}

.buildProject{
    float: right;
    margin-bottom: 20px;
}

</style>
